<template>
	<div class="paddingtb line_b flex">
		<div class="flex1">
			<div class="flexbetween">
				<div class="text_ft color_zero">{{item.createtime_text}}</div>
				<div class="price">标金：{{item.price}}元</div>
			</div>
			<!-- 标签 -->
			<div class="flexleft flex_wrap">
				<div class="tagBox margin_top1 margin_right2" v-if="item.grade.name">{{item.grade.name}}/{{item.subject.name}}</div>
				<div class="tagBox margin_top1 margin_right2" v-if="item.is_need_video">需要视频讲解</div>
				<div class="tagBox margin_top1 margin_right2">接单后{{item.duration}}分钟内回答</div>
			</div>
			<!-- 描述 -->
			<div class="margin_top1 text_f color_three word_wrap">{{item.content}}​</div>
			<!-- 图片 -->
			<div class="flexleft flex_wrap">
				<div class="margin_top2 img_box" v-for="ite in item.images_arr" :key="ite">
					<img :src="ite" alt="">
				</div>
			</div>
			<div class="flexbetween margin_top2">
				<!-- 接单后显示 -->
				<div class="flexleft" v-if="item.teacher_id">
					<img class="teacherImg margin_right1" :src="item.teacher.avatar" alt="">
					<div class="text_d color_three">{{item.teacher.username}}</div>
				</div>
				<view class="flexleft" v-else></view>
				<div class="flexright flex1">
					<!-- 撤单 -->
					<div class="withdrawBox pointer" v-if="item.state==3" @click="chedan(item.id)">
						<i class="el-icon-delete" style="color: #FF0000;margin-right: 5px;"></i>
						<span class="text_f color_red">撤单</span>
					</div>
					<!-- 回答倒计时 -->
					<div class="flexleft" v-if="item.state==4">
						<div class="text_d color_theme">回答截至时间：{{item.atuocanceltime_text}}</div>
					</div>
					<!-- 已完成 -->
					<!-- <div class="flexright" v-if="item.is_reply && item.state==4">
						<div class="text_d color_theme">未在规定时间内回答，金额已原路返回！</div>
					</div> -->
					<!-- 回答、拉黑 -->
					<div class="flexleft">
						<div class="withdrawBox margin_right2 pointer" v-if="item.is_reply" style="border-color: #3478F5;"
							@click="goAnswer(item.id)">
							<i class="el-icon-chat-dot-square" style="color: #3478F5;margin-right: 5px;"></i>
							<span class="text_f color_theme">回答</span>
						</div>
						<div class="withdrawBox" v-if="item.can_blacklist" @click="dialogVisible = true">
							<i class="el-icon-remove-outline" style="color: #FF0000;margin-right: 5px;"></i>
							<span class="text_f color_red">拉黑</span>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- 拉黑弹窗 -->
		<el-dialog title="" :visible.sync="dialogVisible" width="30%" center top="30vh" :before-close="handleClose">
			<div class="flexleft">
				<img class="warnImg margin_right1" src="../../../static/image/mine/warn.png" alt="">
				<div class="text_ht color_zero">确认要将{{item.teacher.username}}的账号加入黑名单么？</div>
			</div>
			<div class="text_d color_six margin_top1 margin_left4">加入黑名单后他将不能回答您的问题，也看不到其发布的所有信息！</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="lahei(item.id)">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import { formateTimeStamp } from "@/API/tools"
	import {
		cancel_order,
		blacklist_teacher
	} from "@/API/question"
	export default {
		props: ["item"],
		data() {
			return {
				dialogVisible: false
			}
		},
		filters: {
			limitTimeFilter(val) {
				if (val > 0) {
					let formateLimitTimes = formateTimeStamp(val);
					let txt =
						`${formateLimitTimes.hour} 时 ${formateLimitTimes.min} 分            			${formateLimitTimes.seconds} 秒`;
					if (formateLimitTimes.day != '00') {
						txt =
							`${Number(formateLimitTimes.day)*24} 时 ${formateLimitTimes.min} 分   ${formateLimitTimes.seconds} 秒`;
					}
					return txt;
				} else {
					const twtxt = `0 时 0 分 0 秒`
					return twtxt;
				}
			}
		},
		methods: {
			goAnswer(id) { //回答
				this.$router.push({
					
					path: "/mine/mineQuestionAnswer",
					query:{
						id:this.item.id
					}
				})
			},
			goBlock() { //拉黑
				this.dialogVisible = true
			},
			chedan(id) {
				this.$confirm('确定撤单吗？')
					.then(_ => {
						cancel_order({
							teacher_question_id:id,
						}).then(res => {
							if (res.data.code == 1) {
								this.$message.success(res.data.msg)
								this.$bus.$emit("changelist")
							}else{
								this.$message.error(res.data.msg)
							}
						})
					})
					.catch(_ => {});
			},
			lahei(id) {
				this.dialogVisible = false
				blacklist_teacher({
					teacher_id:this.item.id,
				}).then(res => {
					if (res.data.code == 1) {
						this.$message.success(res.data.msg)
						this.$bus.$emit("changelist")
					}else{
						this.$message.error(res.data.msg)
					}
				})
			},
			handleClose(done) {
				done();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.userImg {
		width: 50px;
		min-width: 50px;
		height: 50px;
		border-radius: 50%;
	}

	.price {
		padding: 5px 15px;
		background: rgba(255, 0, 0, .1);
		border-radius: 4px 4px 4px 4px;
		font-size: 14px;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FF0000;
	}

	/* 标签 */
	.tagBox {
		padding: 5px 15px;
		background: rgba(52, 120, 245, .1);
		border-radius: 4px 4px 4px 4px;
		font-size: 14px;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #3478F5;
	}

	.img_box {
		width: 20%;

		// display: flex;
		// justify-content: center;
		img {
			width: 121px;
			height: 122px;
			border-radius: 9px 9px 9px 9px;
		}
	}

	.teacherImg {
		width: 28px;
		min-width: 28px;
		height: 28px;
		border-radius: 50%;
	}

	/* 撤单 */
	.withdrawBox {
		padding: 3px 10px;
		border-radius: 5px 5px 5px 5px;
		border: 1px solid #FF0000;
	}

	/* 倒计时 */
	.timeBox {
		padding: 2px;
		background: #3478F5;
		border-radius: 2px 2px 2px 2px;
		font-size: 14px;
		font-family: DIN Next LT Pro-Regular, DIN Next LT Pro;
		font-weight: 400;
		color: #FFFFFF;
		margin: 0 2px;
	}

	.warnImg {
		width: 26px;
		min-width: 26px;
		height: 26px;
	}

	::v-deep .el-dialog {
		border-radius: 8px;
	}
</style>